import { Code } from 'dw-mx-extend';
import React, { useState } from 'react';
import { Button, Col, DatePicker, Form, Input, Modal, Row, Select, Space } from 'dw-mx';
import moment from 'moment';

const { RangePicker } = DatePicker;

export default function FilterChild(props) {
    const [form] = Form.useForm();
    // 初始化定义筛选规则的数组
    let rules = [];
    const handleClick = async () => {
        // 开始获取弹窗输入的数据，并将数据push进rules中。
        // 其中，name为筛选的数据，method为筛选的方法，dataIndex就是age、name的标识符，format是格式（就是用来判断这个数据应该做什么过滤,例如进行数字过滤、字符串过滤、日期过滤等
        // columnsFormat这个数组是自己定义的，也可以把它放到columns中来进行获取
        rules = [];
        const formData = form.getFieldsValue();
        props.filterColumnsData.map((item, index) => {
            const dataIndex = item.dataIndex;
            rules.push({
                name: formData[dataIndex],
                method: formData[`${dataIndex}filterFunc`],
                dataIndex: dataIndex,
                format: props.columnsFormat[index],
                dateFormat: formData.dateFormat,
            });
        });

        // 定义过滤后的数组
        let newFilteredColumns = undefined;
        newFilteredColumns = [];
        // 进行过滤，传入过滤规则和需要过滤的数据
        const filteredData = onFilter(rules, props.filterData);
        // filteredData是一个由true和false组成的数组，根据每一项的true和false，生成过滤后的数组
        filteredData.map((item, index) => {
            if (item === true) {
                newFilteredColumns.push(props.filterData[index]);
            } else {
            }
        });
        // 将过滤后的数组传递到父组件
        props.onFilterDataChanged(newFilteredColumns);
    };
    // 过滤函数，接收过滤规则和需要过滤的数据
    const onFilter = (rules, filterData) => {
        // 对需要过滤的数据进行遍历
        const tfData = filterData.map((item, index) => {
            // 对其中的每一项都进行多个过滤规则的判断
            const middleData = rules.map((rulesItem, rulesIndex) => {
                // 数字类型的过滤，分为：1:等于,2:不等于,3:小于,4:小于等于,5:大于,6:大于等于,7:为空,8:不为空
                if (rulesItem.format == 'number') {
                    if (rulesItem.method == '1') {
                        //等于
                        if (rulesItem.name == item[rulesItem.dataIndex]) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '2') {
                        //不等于
                        if (rulesItem.name != item[rulesItem.dataIndex]) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '3') {
                        //小于
                        if (rulesItem.name > item[rulesItem.dataIndex]) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '4') {
                        //小于等于
                        if (rulesItem.name >= item[rulesItem.dataIndex]) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '5') {
                        //大于
                        if (rulesItem.name < item[rulesItem.dataIndex]) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '6') {
                        // 大于等于
                        if (rulesItem.name <= item[rulesItem.dataIndex]) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '7') {
                        // 为空
                        if (item[rulesItem.dataIndex] == null || item[rulesItem.dataIndex] == undefined || item[rulesItem.dataIndex].length == 0) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '8') {
                        // 不为空
                        if (item[rulesItem.dataIndex] !== null && item[rulesItem.dataIndex] !== undefined && item[rulesItem.dataIndex].length !== 0) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                } else if (rulesItem.format == 'string') {
                    // 字符串规则的过滤，分为：1:等于,2:不等于,3:包含,4:不包含,5:为空,6:不为空
                    if (rulesItem.method == '1') {
                        // 等于
                        if (rulesItem.name == item[rulesItem.dataIndex]) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '2') {
                        // 不等于
                        if (rulesItem.name != item[rulesItem.dataIndex]) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '3') {
                        //包含
                        if (item[rulesItem.dataIndex].indexOf(rulesItem.name) !== -1) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '4') {
                        //不包含
                        if (item[rulesItem.dataIndex].indexOf(rulesItem.name) == -1) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '5') {
                        //为空
                        if (item[rulesItem.dataIndex] == null || item[rulesItem.dataIndex] == undefined || item[rulesItem.dataIndex].length == 0) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '6') {
                        //不为空
                        if (item[rulesItem.dataIndex] !== null && item[rulesItem.dataIndex] !== undefined && item[rulesItem.dataIndex].length !== 0) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                } else if (rulesItem.format == 'date') {
                    // 1:YYYY/MM/dd,2:MM/dd/YYYY,3:YYYY-MM-dd,4:MM-dd-YYYY
                    const dateFormatList = ['YYYY/MM/DD', 'MM/DD/YYYY', 'YYYY-MM-DD', 'MM-DD-YYYY'];
                    if (rulesItem.dateFormat !== undefined) {
                        if (rulesItem.method == '1') {
                            //等于
                            if (item[rulesItem.dataIndex] == rulesItem.name.format(dateFormatList[rulesItem.dateFormat - 1])) {
                                return true;
                            } else {
                                return false;
                            }
                        } else if (rulesItem.method == '2') {
                            //不等于
                            if (moment(item[rulesItem.dataIndex], dateFormatList[rulesItem.dateFormat - 1]) !== rulesItem.name) {
                                return true;
                            } else {
                                return false;
                            }
                        } else if (rulesItem.method == '3') {
                            // 在选择的时间之前
                            if (moment(item[rulesItem.dataIndex], dateFormatList[rulesItem.dateFormat - 1]).isBefore(rulesItem.name)) {
                                return true;
                            } else {
                                return false;
                            }
                        } else if (rulesItem.method == '4') {
                            // 等于或小于选择的时间
                            if (moment(item[rulesItem.dataIndex], dateFormatList[rulesItem.dateFormat - 1]).isBefore(rulesItem.name) || moment(item[rulesItem.dataIndex], dateFormatList[rulesItem.dateFormat - 1]) == rulesItem.name) {
                                return true;
                            } else {
                                return false;
                            }
                        } else if (rulesItem.method == '5') {
                            // 大于选择的时间
                            if (moment(item[rulesItem.dataIndex], dateFormatList[rulesItem.dateFormat - 1]).isAfter(rulesItem.name)) {
                                return true;
                            } else {
                                return false;
                            }
                        } else if (rulesItem.method == '6') {
                            // 大于等于选择的时间
                            if (moment(item[rulesItem.dataIndex], dateFormatList[rulesItem.dateFormat - 1]).isAfter(rulesItem.name) || moment(item[rulesItem.dataIndex], dateFormatList[rulesItem.dateFormat - 1]) == rulesItem.name) {
                                return true;
                            } else {
                                return false;
                            }
                        } else if (rulesItem.method == '7') {
                            // 选择的时间中包含table中的时间
                            if (moment(item[rulesItem.dataIndex]).isBetween(rulesItem.name[0], rulesItem.name[1]) == true) {
                                return true;
                            } else {
                                return false;
                            }
                        } else if (rulesItem.method == '8') {
                            // 选择的时间中不包含table中的时间
                            if (moment(item[rulesItem.dataIndex]).isBetween(rulesItem.name[0], rulesItem.name[1]) == false) {
                                return true;
                            } else {
                                return false;
                            }
                        } else if (rulesItem.method == '9') {
                            // table中对应列的数据为null、undefined或长度为0
                            if (item[rulesItem.dataIndex] == null || item[rulesItem.dataIndex] == undefined || item[rulesItem.dataIndex].length == 0) {
                                return true;
                            } else {
                                return false;
                            }
                        } else if (rulesItem.method == '10') {
                            // table中的对应列的数据不为null、undefined并且长度不为0
                            if (item[rulesItem.dataIndex] !== null && item[rulesItem.dataIndex] !== undefined && item[rulesItem.dataIndex].length !== 0) {
                                return true;
                            } else {
                                return false;
                            }
                        }
                    } else {
                        console.warn('您没有选择日期的格式。如果您并不想筛选日期，请忽略此条警告。');
                    }
                } else if (rulesItem.format == 'select') {
                    // 这里的find方法，返回的是和item[rulesItem.dataIndex]相等的值
                    const tempData = props.addressSelectList.find((value) => {
                        return value['value'] == item[rulesItem.dataIndex];
                    });
                    if (rulesItem.method == '1') {
                        if (tempData['label'] == rulesItem.name) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '2') {
                        if (tempData['label'] !== rulesItem.name) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '3') {
                        if (tempData['label'].indexOf(rulesItem.name) !== -1) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '4') {
                        if (tempData['label'].indexOf(rulesItem.name) == -1) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '5') {
                        //为空
                        if (tempData['label'] == null || tempData['label'] == undefined || tempData['label'].length == 0) {
                            return true;
                        } else {
                            return false;
                        }
                    } else if (rulesItem.method == '6') {
                        //不为空
                        if (tempData['label'] !== null && tempData['label'] !== undefined && tempData['label'].length !== 0) {
                            return true;
                        } else {
                            return false;
                        }
                    }
                }
            });
            // 这里的flag获取到的是一个两位的数组，来检查其中是否包含false。如果任意一项是false，则过滤不通过；反之，只有都为ture时才会通过。
            const flag = middleData.indexOf(false, 0);
            if (flag === -1) {
                return true;
            } else {
                return false;
            }
        });
        // 返回tfData，即上面的函数中的filteredData
        return tfData;
    };
    // 控制弹窗中form表单的重置
    const handleReset = async () => {
        form.resetFields();
    };
    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };
    // 用来控制日期筛选中，选择包含时，展示的界面
    const [datePickerState, updateDatePickerState] = useState(0);
    const dateFormatChange = async (val) => {
        if (val === '7' || val === '8') {
            updateDatePickerState(1);
        } else {
            updateDatePickerState(0);
        }
    };
    return (
        <>
            <Form form={form} {...layout} layout={'horizontal'}>
                {props.filterColumnsData.map((item, index) => {
                    // 当数据格式不同时，弹窗中的form表单的每一项也都不同。这里我是根据columnsFormat来区分的。
                    if (props.columnsFormat[index] == 'number') {
                        return (
                            <div style={{ width: '100%', display: 'inline-block' }}>
                                <Col span={24}>
                                    <Row>
                                        <Col span={12}>
                                            <Form.Item name={item.dataIndex} label={item.title}>
                                                <Input name={'filterData'} placeholder={`请输入${item.title}的筛选条件`} maxLength={6}></Input>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item name={`${item.dataIndex}filterFunc`} label={'筛选条件'}>
                                                <Select placeholder={'请输入筛选条件'} options={Code.STRINGCODE('1:等于,2:不等于,3:小于,4:小于等于,5:大于,6:大于等于,7:为空,8:不为空')}></Select>
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </Col>
                            </div>
                        );
                    } else if (props.columnsFormat[index] == 'string') {
                        return (
                            <div style={{ width: '100%', display: 'inline-block' }}>
                                <Col span={24}>
                                    <Row>
                                        <Col span={12}>
                                            <Form.Item name={item.dataIndex} label={item.title}>
                                                <Input name={'filterData'} placeholder={`请输入${item.title}的筛选条件`} maxLength={6}></Input>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item name={`${item.dataIndex}filterFunc`} label={'筛选条件'}>
                                                <Select placeholder={'请输入筛选条件'} options={Code.STRINGCODE('1:等于,2:不等于,3:包含,4:不包含,5:为空,6:不为空')}></Select>
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </Col>
                            </div>
                        );
                    } else if (props.columnsFormat[index] == 'date') {
                        return (
                            <div style={{ width: '100%', display: 'inline-block' }}>
                                <Col span={24}>
                                    <Row>
                                        <Col span={12}>
                                            <Form.Item label={item.title}>
                                                <Row>
                                                    <Col span={12}>
                                                        <Form.Item style={{ marginBottom: 0 }} name={item.dataIndex}>
                                                            {datePickerState == 0 ? <DatePicker></DatePicker> : <RangePicker></RangePicker>}
                                                        </Form.Item>
                                                    </Col>
                                                    <Col span={12}>
                                                        <Form.Item name={`dateFormat`} style={{ marginBottom: 0 }}>
                                                            <Select placeholder={'请选择日期格式'} options={Code.STRINGCODE('1:YYYY/MM/DD,2:MM/DD/YYYY,3:YYYY-MM-DD,4:MM-DD-YYYY')}></Select>
                                                        </Form.Item>
                                                    </Col>
                                                </Row>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item name={`${item.dataIndex}filterFunc`} label={'筛选条件'}>
                                                <Select placeholder={'请输入筛选条件'} onChange={dateFormatChange} options={Code.STRINGCODE('1:等于,2:不等于,3:小于,4:小于等于,5:大于,6:大于等于,7:包含,8:不包含,9:为空,10:不为空')}></Select>
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </Col>
                            </div>
                        );
                    } else if (props.columnsFormat[index] == 'select') {
                        return (
                            <div style={{ width: '100%', display: 'inline-block' }}>
                                <Col span={24}>
                                    <Row>
                                        <Col span={12}>
                                            <Form.Item name={item.dataIndex} label={item.title}>
                                                <Input placeholder={`请输入${item.title}的筛选条件`}></Input>
                                            </Form.Item>
                                        </Col>
                                        <Col span={12}>
                                            <Form.Item name={`${item.dataIndex}filterFunc`} label={'筛选条件'}>
                                                <Select placeholder={'请输入筛选条件'} options={Code.STRINGCODE('1:等于,2:不等于,3:包含,4:不包含,5:为空,6:不为空')}></Select>
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </Col>
                            </div>
                        );
                    }
                })}
            </Form>
            <Space>
                <Button onClick={handleReset}>重置</Button>
                <Button onClick={handleClick}>筛选</Button>
            </Space>
        </>
    );
}
